<template>
  <div>
    <div
        ref="sqlMonaco"
        class="sql-editor-content"
    ></div>
  </div>
</template>
<script>
import * as monaco from "monaco-editor";

export default {
  data() {
    return {monacoEditor: null, sqlText: ""};
  },
  methods: {
    createEditor() {
      if (!this.$refs.sqlMonaco) return;
      this.monacoEditor = monaco.editor.create(this.$refs.sqlMonaco, {
        value: this.sqlText,
        language: "mysql",
        theme: "vs-dark",
        automaticLayout: true, //是否自适应
        autoIndent: true,
        overviewRulerBorder: false, // 不要滚动条的边框
        minimap: {
          enabled: false, // 不要小地图
        },
      });
      this.monacoEditor.onDidChangeModelContent(() => {
        this.sqlText = this.monacoEditor.getValue();
      });
    },
    getEditorSelectText() {
      if (this.monacoEditor != null) {
        let s = this.monacoEditor.getSelection();
        let lines = this.sqlText.split("\n");
        let text = [];
        for (let i = s.startLineNumber; i <= s.endLineNumber; i++) {
          let l = lines[i - 1];
          if (i == s.startLineNumber && i == s.endLineNumber) {
            l = l.substring(s.startColumn - 1, s.endColumn - 1);
          } else if (i == s.startLineNumber) {
            l = l.substring(s.startColumn - 1);
          } else if (i == s.endLineNumber) {
            l = l.substring(0, s.endColumn - 1);
          }
          if (l.length > 0) {
            text.push(l);
          }
        }
        if (text.length == 0) {
          return this.sqlText;
        }
        return text.join("\n");
      }
      return null;
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.createEditor();
    });
  },
};
</script>
<style scoped>
.sql-editor-content {
  margin-top: 10px;
  min-height: 250px;
  width: 100%;
  border: 2px solid blue;
}
</style>
    